<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
  <head>
   <base href="<%=basePath%>">
    <title>商品管理</title>
	<script type="text/javascript" src="/js/jquery-1.8.0.js"></script> 
	<script type="text/javascript">
	//根据已有元素,取得它的坐标	
	function getElemPos(obj) {
		var pos = {
			"top" : 0,
			"left" : 0
		};
		if (obj.offsetParent) {
			while (obj.offsetParent) {
				pos.top += obj.offsetTop;
				pos.left += obj.offsetLeft;
				obj = obj.offsetParent;
			}
		} else if (obj.x) {
			pos.left += obj.x;
		} else if (obj.x) {
			pos.top += obj.y;
		}
		
		return {
			x : pos.left,
			y : pos.top
		};

	}
	function showDetails(item, goodsId, desc) {
			var position = getElemPos(item);
			$("#div_goods_detail").show();
			$("#div_goods_detail").css("left",position.x-150).css("top",position.y);
			$("#goods_picture").attr("src","GoodsServlet.do?flag=showPicture&goodsId="+goodsId);
			$("#div_imgdesc").html("<center>" + desc + "</center>");
		}
	function hideDetails() {
		$("#div_goods_detail").hide();
	}
	$(function(){
		$("#div_goods_detail").hide();
		$("#ch_checkall,#top_ch_checkall").click(function(){
			if(this.checked){
				$("input[name=ck_id]").attr("checked","checked");
			}else{
				$("input[name=ck_id]").removeAttr("checked");
			}		
		});
		
		$("#bigCateId").change(function(){
			if(this.value=="-1"){
				$("#smallCateId").html("<option  value='-1'>小分类</option>");
			}else{
				$.ajax({
					url:"GoodsServlet.do",
					type:"post",
					async:false,
					dataType:"json",
					data:{bigcateid:this.value,flag:"smallcatelist"},
					success:function(cateList){
						$("#smallCateId").empty();
						$.each(cateList,function(key,cateInfo){
							var optionStr="<option value='"+cateInfo.id+"'>"+cateInfo.cateName+"</option>";
							$("#smallCateId").append(optionStr);
						});
						}
				})	
			}
		})
	})
	
	function delall(){
		if($("input[name=ck_id]:checked").size()==0){
			alert("请至少选一项!");
		}
		else{
			if(confirm('确定要删除所选项吗')){
				$("#flag").val("delall")
				form1.submit();
			}
		}
	}
	</script>
	<link rel="stylesheet" type="text/css" href="/css/maintable.css" ></link>
  	</head>
  	<body>

				<div class ="div_title">
						<div class="div_titlename"> <img src="images/san_jiao.gif" ><span>商品列表</span></div>
						<div class="div_titleoper">
						<input type="checkbox"  id="top_ch_checkall"/> 全选
						<a href="GoodsServlet.do?flag=gotoadd"> <img src="images/add.gif"/>添加 </a> 
						<a href="javascript:delall()"><img src="images/del.gif"/>删除</a> 
						</div>
				 </div>
				 <form action="GoodsServlet.do" method="post" name="form1">
				 <input type="hidden" name="flag" value="goodsmanage" id="flag">
				 <div class ="div_tools">
				 	 &nbsp; &nbsp; &nbsp;
					  <select name="bigCateId" id="bigCateId">
			 						<option value="-1">大分类</option>
			 						<c:forEach var="cate" items="${cateList}">
			 							<option value="${cate.id }">${cate.cateName}</option>
			 						</c:forEach>
			 		 </select>
				 	&nbsp;
				 	<select name="smallCateId" id="smallCateId">	
				 		<option value="-1">小分类</option>  
				 	</select>
				 	  &nbsp;  &nbsp;  &nbsp;商品名称:<input type="text" name="goodsName" value="${param.goodsName}"></input>
				 	<input id="btnsubmit" type="submit"  value="查询" />
				 </div>
				 <input type="hidden" name="flag" value="delAdmins" />
				 <table class="main_table" >
				       <tr>
				 				<th><input type="checkbox" id="ch_checkall" /></th>	
				 				<th>名称</th> 	
				 				<th>单位</th>  
				 				<th>单价</th> 
				 				<th>大分类</th> 
				 				<th>小分类</th> 
				 				<th>操作</th>
				 		</tr>
				 		<c:forEach var="goods" items="${goodsList}">
				 		<tr>
				 				<td>
				 					<input type="checkbox" name="ck_id" value="${goods.id}" /> 
				 				</td>
				 				<td>${goods.goodsName}</td>	
				 				<td>${goods.unit}</td>
				 				<td>${goods.price}</td>	
				 				<td>${goods.bigCateName}</td>
				 				<td>${goods.smallCateName}</td>
				 				<td>
				 					<a href="javascript:void(0)" 
					 					onmouseover="showDetails(this,'${goods.id}','${goods.des}')"
					 					onmouseout="hideDetails()"
					 				>查看</a> |  
					 				<a href="GoodsServlet.do?flag=gotoupdate&goodsId=${goods.id}">修改</a> |  
					 			    <a href="GoodsServlet.do?flag=deletegood&goodsId=${goods.id}">删除</a> 

				 				</td>
				 		</tr>
				   		 </c:forEach>
				 	
				</table>
				
				
				
				<div class="div_page" >
					  <div class="div_page_left">    共有 <label>${pageInfo.rowCount }</label> 条记录，当前第 <label>${pageInfo.pageIndex }</label> 页，共 <label>${pageInfo.pageCount }</label> 页	</div>
					  <div class="div_page_right" > 	 
					   <a href="GoodsServlet.do?flag=goodsmanage&pageIndex=1" >首页</a>
		  	 			 <a href="GoodsServlet.do?flag=goodsmanage&pageIndex=${pageInfo.pageIndex-1 }">上一页</a>
			  			 <a href="GoodsServlet.do?flag=goodsmanage&pageIndex=${pageInfo.pageIndex+1 }">下一页 </a>
		  	 		   	 <a href="GoodsServlet.do?flag=goodsmanage&pageIndex=${pageInfo.pageCount}">尾页</a>
		  	 		   	 
		  	 		   	 <button>转到</button>
			 			 <input type="text" name="pageIndex" id="pageIndex" value="${pageInfo.pageIndex}"  type="number"/> 页
					   </div>
						
				</div>
				<div id="div_goods_detail">
					<img id="goods_picture" width="140" height="190" />
					<div id="div_imgdesc"></div>
				</div>
				</form>
				
			  <script type="text/javascript">
			  $(function(){
				  var msg='${msg}';
			  	 	if(msg!=''){
			  	 		alert(msg);
			  	 	}
			  	  var bigCateId='${bigCateId}'
			  	  if(bigCateId!=''){
			  		$("#bigCateId option").each(function(){
		     			if(this.value==bigCateId){
		     				this.selected=true;
		     				var smallCateId='${smallCateId}'
		     				if(${smallCateId!=null}){
		     					$.ajax({
									url:"GoodsServlet.do",
									type:"post",
									async:false,
									dataType:"json",
									data:{bigcateid:this.value,flag:"smallcatelist"},
									success:function(cateList){
										$("#smallCateId").empty();
										$.each(cateList,function(key,cateInfo){
											var optionStr;
											if(smallCateId==cateInfo.id){
												optionStr = "<option value='"+cateInfo.id+"' selected>"+cateInfo.cateName+"</option>";
											}else{
												optionStr="<option value='"+cateInfo.id+"'>"+cateInfo.cateName+"</option>";
											}
											$("#smallCateId").append(optionStr);
										});
			  						}
								})	
		     				}
			  	  		}
			  		})
			  	  }
			  })
			 </script>
  </body>
</html>
